<template>
  <div class="home-dashboard">
    <headerCom>
      <main class="main-body">
        <div class="sreachbox">
          <van-search
            background="transparent"
            v-model="searchVal"
            placeholder="请输入资产名称"
            @search="searchFn"
          />

          <div class="dropdown">
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1" />
              <van-dropdown-item v-model="value2" :options="option2" />
            </van-dropdown-menu>
          </div>
        </div>

        <div class="table-list">
          <table-com
            :columns="columns"
            :data="list"
            :loading="loading"
            :finished="finished"
            @load="loadMore"
          />
        </div>
      </main>
    </headerCom>
  </div>
</template>

<script setup>
import headerCom from '@/components/headerCom.vue'
import tableCom from '@/components/tableCom.vue'

import { ref, reactive } from 'vue'

const searchVal = ref('')

const value1 = ref(0)
const value2 = ref('a')
const option1 = [
  { text: '全部设备', value: 0 },
  { text: '打印机', value: 1 },
  { text: '交换机', value: 2 },
  { text: '电视', value: 3 },
]
const option2 = [
  { text: '默认排序', value: 'a' },
  { text: '好评排序', value: 'b' },
  { text: '销量排序', value: 'c' },
]

const columns = reactive([
  { title: '名称', prop: 'name', width: '90px' },
  { title: '状态', prop: 'status', width: '50px' },
  { title: '领用时间', prop: 'time', width: '100px' },
  { title: '领用人', prop: 'user', width: '60px' },
])

const list = ref([])
const loading = ref(false)
const finished = ref(false)
let page = 1
function loadMore() {
  loading.value = true
  // 模拟异步加载
  setTimeout(() => {
    // 假设每页10条，最多3页
    if (page <= 10) {
      list.value.push(...mockData(page))
      page++
      loading.value = false
      if (page > 10) finished.value = true
    }
  }, 1000)
}

function mockData(page) {
  return Array.from({ length: 10 }, (_, i) => ({
    name: `设备${(page - 1) * 10 + i + 1}`,
    status: '已使用',
    time: '2025-09-09',
    user: '张三',
  }))
}
function searchFn(word) {
  console.log(word)
}
</script>

<style lang="less">
.dropdown {
  padding: 0 12px;
  margin-bottom: 12px;
}
.main-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  // border: 2px solid red;
  .sreachbox {
    height: 120px;
  }
  .table-list {
    flex: 1;
    overflow: scroll;
  }
}
</style>
